<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
    <style>
         :root {
            font-size: 13px;
        }
        
        body {
            padding: 8px;
        }
        
        .card {
            margin-bottom: 10px;
            border: 1px solid #efefef;
            height: 70px;
            display: flex;
            align-items: center;
        }
        
        .brand-top {
            font-size: 16px;
            display: flex;
            justify-content: flex-start;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="input-group-addon brand-top">添加品牌</div>
        <!-- 卡片区域 -->
        <div class="card">
            <form class="form-inline" @submit.prevent>
                <div class="form-group">
                    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
                    <div class="input-group">
                        <div class="input-group-addon">品牌名称</div>
                        <input type="text" class="form-control" placeholder="" ref="nihao" v-model.trim="brandname" @keyup.esc="brandname=''">
                        <div class="input-group-addon">.00</div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary" @click="addNewBrand">添加品牌</button>
            </form>
        </div>
        <!-- 品牌列表 -->
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <td>#</td>
                    <td>品牌名称</td>
                    <td>状态</td>
                    <td>创建时间</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in brandlist" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.brandname}}</td>
                    <td>
                        <input type="checkbox" v-model="item.state">
                        <label for="" v-if="item.state">已启用</label>
                        <label for="" v-else>已禁用</label>
                    </td>
                    <td>{{item.addtime | dataFormat}}</td>
                    <td> <a href="#" @click.prevent="remove(item.id)">删除</a> </td>
                </tr>
            </tbody>
        </table>
    </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    Vue.filter('dataFormat', (str) => {
        const dt = new Date(str)
        const y = dt.getFullYear()
        const m = dt.getMonth() + 1
        const d = dt.getDay()
        const hh = padZero(dt.getHours())
        const mm = padZero(dt.getMinutes())
        const ss = padZero(dt.getSeconds())
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    })

    function padZero(n) {
        return n > 9 ? n : '0' + n
    }
    const vm = new Vue({
        el: '#app',
        data: {
            brandname: '',
            brandlist: [{
                id: 1,
                brandname: '宝马',
                state: true,
                addtime: new Date()
            }, {
                id: 2,
                brandname: '奥迪',
                state: true,
                addtime: new Date()
            }, {
                id: 3,
                brandname: '奔驰',
                state: true,
                addtime: new Date()
            }, ]
        },
        methods: {
            // 添加一行
            addNewBrand() {
                if (this.brandlist.find(x => x.brandname === this.brandname) || this.brandname === '') {
                    return alert('品牌已存在或格式错误！')
                } else {
                    this.brandlist.push({
                        id: this.brandlist.length + 1,
                        brandname: this.brandname,
                        state: false,
                        addtime: new Date()
                    })
                }
            },
            // 删除某一行
            remove(id) {
                // 借助filter对数组进行果过滤
                // 过滤后形成了一个新的数组 
                // 用数组去接一下
                this.brandlist = this.brandlist.filter(x => x.id !== id)

            }
        },
        created() {
            this.$nextTick(() => {
                this.$refs.nihao.focus()
            })
        }
    })
</script>

</html>